<template>
<el-main class="main-flow">
    <div class="block">
        <div class="page-title">{{ pageTitle }}</div>
        <el-slider v-model="scaler" show-input @change="scaleFlow"> </el-slider>
    </div>
    <div class="box-flow">
        <FactoryDrawFlow v-if="FlowConfigInit" @clickNode="clickNode" ref="flow" :FlowConfig="FlowConfig"></FactoryDrawFlow>
    </div>
    <div class="box-flow-footer">
        <el-button @click="submit" type="primary">提交</el-button>
    </div>
    <conditionDrawer ref="conditionDrawer" @nodeChange="nodeChange"></conditionDrawer>
    <auditorDrawer ref="aduitorDrawer" @nodeChange="nodeChange"></auditorDrawer>
</el-main>
</template>

<script>
import conditionDrawer from "./components/selectCondition";
import auditorDrawer from "./components/selectAuditor";
import {
    readApi,
    setProcessApi
} from "@/api/audit/config";

export default {
    name: "config",
    components: {
        conditionDrawer,
        auditorDrawer,
    },
    data() {
        return {
            id: "",
            scaler: 100,
            list: [],
            treeData: [],
            FlowConfigInit: false,
            pageTitle: "",
            FlowConfig: [{
                id: "root",
                groupId: null,
                type: "1",
                title: "所有人",
                content: "请选择",
                isRow: true,
                isRoot: true,
                data: {},
            }, ],
            userList: [],
            roleList: [],
            orderTypeList: [],
            cooperateModeList: [],
            hotelList: [],
            departmentList: [],
        };
    },

    created() {
        this.id = this.$route.query.id;
        this.readConfig();
    },

    watch: {
        $route(to, from) {
            let id = this.id;
            let newId = to.query.id;
            if (id != newId) {
                this.$destroy("FactoryDrawFlow");
                this.getApprovalConfig();
                this.$router.title = this.pageTitle;
            }
        },
    },

    methods: {
        readConfig() {
            let params = {
                id: this.id
            };
            readApi(params).then(res => {
                if (res.code == 200) {
                    let data = res.data.row;
                    this.pageTitle = `${data.company.title}-${data.tag.title}-审核`;
                    if (data.condition.length > 0) {
                        this.FlowConfig = data.condition;
                    } else {
                        this.FlowConfig = [{
                            id: "root",
                            groupId: null,
                            type: "1",
                            title: "所有人",
                            content: "请选择",
                            isRow: true,
                            isRoot: true,
                            data: {},
                        }];
                    }

                    this.FlowConfigInit = true;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },

        clickNode(node) {
            switch (node.type) {
                case "2":
                    node.title = "审批人";
                    if (this.$refs.aduitorDrawer != undefined) {
                        this.$refs.aduitorDrawer.showDrawer(node, "approver");
                    } else {
                        this.$nextTick(function () {
                            this.$refs.aduitorDrawer.showDrawer(node, "approver");
                        });
                    }
                    break;
                case "3":
                    if (this.$refs.conditionDrawer != undefined) {
                        this.$refs.conditionDrawer.showDrawer(node);
                    } else {
                        this.$nextTick(function () {
                            this.$refs.conditionDrawer.showDrawer(node);
                        });
                    }
                    break;
                case "4":
                    node.title = "抄送人";
                    if (this.$refs.aduitorDrawer != undefined) {
                        this.$refs.aduitorDrawer.showDrawer(node, "copyTo");
                    } else {
                        this.$nextTick(function () {
                            this.$refs.aduitorDrawer.showDrawer(node, "copyTo");
                        });
                    }
                    break;
                case "6":
                    node.title = "流转至";
                    break;
            }
        },
        scaleFlow(e) {
            if (this.$refs.flow != undefined) {
                this.$refs.flow.scaleFlow(e);
            } else {
                this.$nextTick(function () {
                    this.$refs.flow.scaleFlow(e);
                });
            }
        },

        // 提交审核流程
        submit() {
            let that = this;
            let {
                list: res,
                treeData
            } = that.$refs.flow.getResData();

            that.list = res;
            let groups = {};
            let approval = {};
            that.list.forEach((item) => {
                if (item.type == 2) {
                    if (approval[item.groupId] == undefined) {
                        approval[item.groupId] = [];
                        approval[item.groupId].push(item);
                    } else {
                        approval[item.groupId].push(item);
                    }
                } else if (item.type == 3) {
                    if (groups[item.groupId] == undefined) {
                        groups[item.groupId] = [];
                        groups[item.groupId].push(item);
                    } else {
                        groups[item.groupId].push(item);
                    }
                }
            });

            if (Object.keys(approval).length <= 0) {
                this.$message.error("请选择审批人");
                return false;
            }

            for (let i in approval) {
                let user = approval[i];
                let noUser = 0;
                user.forEach((item) => {
                    if (
                        item.data.checkedUserList == undefined ||
                        (item.data.checkedUserList.length == 0 && item.data.role == "")
                    ) {
                        noUser = noUser + 1;
                    }
                });

                if (noUser > 0) {
                    this.$message.error("请选择审批人");
                    return false;
                }
            }

            for (let i in groups) {
                let group = groups[i];
                let emptyAmount = 0;
                group.forEach((item) => {
                    if (!item.data.condition || item.data.condition.length == 0) {
                        emptyAmount = emptyAmount + 1;
                    }
                });
                if (emptyAmount > 1) {
                    that.$message.error("条件设置不完全");
                    return false;
                }
            }

            let params = {
                id: that.id,
                condition: that.list,
            };
            setProcessApi(params).then(res => {
                if (res.code == 200) {
                    that.$message.success(res.msg);
                    that.$router.push({
                        path: "/audit/config/index"
                    })
                } else {
                    that.$message.error(res.msg);
                }
            });
            this.treeData = JSON.stringify(treeData);
        },

        // 获取审批人信息
        nodeChange(node) {
            this.$refs["flow"].nodeChange(node);
        },
    },
};
</script>

<style lang="less" scoped>
.main-flow {
    height: 100%;
    background-color: #f0f2f5;

    .box-flow-footer {
        text-align: center;
    }
}
</style>
